<template>
    <div>
        <iframe ref="iframPeiChart" class="normale-iframe"></iframe>
        <div ref="peiChart" style="height: 300px;"></div>
    </div>
</template>
<script>
import echarts from 'echarts'
var myChart
export default {
    data () {
        return {
            data: [
                {
                    value: 3859.88,
                    name: '中福在线'
                }, {
                    value: 6149.87,
                    name: '即开票'
                }, {
                    value: 56524.81,
                    name: '电脑票'
                }
            ]
        }
    },
    watch: {
        data () {
            this.setEchartOption()
        }
    },
    mounted () {
        myChart = echarts.init(this.$refs.peiChart)
        this.setEchartOption()
        this.$refs.iframPeiChart.contentWindow.onresize = () => {
            myChart.resize()
        }
    },
    methods: {
        setEchartOption () {
            var option = {
                tooltip: {
                    show: true,
                    trigger: 'item',
                    formatter: '{b}: <br>{c} ({d}%)'
                },
                series: [{
                    type: 'pie',
                    selectedMode: 'single',
                    radius: ['45%', '75%'],
                    startAngle: 0,
                    color: ['#f39c12', '#00a65a', '#dd4b39'],
                    label: {
                        normal: {
                            formatter: '{text|{b}} \n{num|{c} ({d}%)}',
                            textStyle: {
                                fontWeight: 'bold',
                                fontSize: 14,
                                rich: {
                                    text: {
                                        fontWeight: '700',
                                        padding: [10, -80, 0, -80]
                                    },
                                    num: {
                                        padding: [0, -80, 10, -80]
                                    }
                                }
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            length: 10,
                            length2: 80
                        }
                    },
                    data: this.data
                }]
            }
            myChart.setOption(option)
        }
    }
}
</script>
